<template>
	<div class="swiper">
		<swiper class="swiperB" :options="swiperOption" ref="mySwiperA">
			<!-- 幻灯内容 -->

			<swiper-slide><router-link to="/songListB"><img class="swiper" src="../images/lunB/img3.png" alt=""></router-link></swiper-slide>
			<swiper-slide><router-link to="/songListB2"><img src="../images/lunB/img2.png" alt="" class="swiper"></router-link></swiper-slide>
			<swiper-slide><router-link to="/songListB3"><img class="swiper" src="../images/lunB/img1.png" alt=""></router-link></swiper-slide>
			<swiper-slide><router-link to="/indexOne/sonThree"><img class="swiper" src="../images/lunB/img4.png" alt=""></router-link></swiper-slide>
			<!-- 以下控件元素均为可选 -->
			<div class="swiper-pagination" slot="pagination"></div>
			<div class="swiper-scrollbar" slot="scrollbar"></div>
		</swiper>
	</div>
</template>

<script>
	import Vue from 'vue'
	import swiper from 'vue-awesome-swiper'
	Vue.use(swiper)
	export default {
		data() {
			return {
				swiperOption: {
					// 所有配置均为可选（同Swiper配置）
					notNextTick: true,
					loop: true,
					autoplay: 5000,
					grabCursor: true,
					setWrapperSize: true,
					autoHeight: true,
					pagination: '.swiper-pagination',
					paginationClickable: true,
					prevButton: '.swiper-button-prev',
					nextButton: '.swiper-button-next',
					mousewheelControl: true,
					observeParents: true,
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	@import "../assets/swiper.min.css";
	.swiper {
		/*width: 100%;*/
		height: 44%;
		img{
			width: 100%;
		}
		overflow: hidden;
	}
</style>